<template>
  <div class="strategyItem">
    <!-- 图片多于3张时使用第一种格式 -->
    <div class="single1" v-if="post.images.length >= 3">
      <!-- 标题 -->
      <h3 @click="$router.push(`/post/articleDetails?id=${post.id}`)">
        {{ post.title }}
      </h3>
      <!-- 文章内容 -->
      <div
        class="content"
        @click="$router.push(`/post/articleDetails?id=${post.id}`)"
      >
        {{ post.summary }}
      </div>
      <!-- 展示图片 -->
      <el-row
        type="flex"
        justify="space-between"
        align="middle"
        class="img-card"
      >
        <a :href="`/post/articleDetails?id=${post.id}`"
          ><img :src="post.images[0]" alt=""
        /></a>
        <a :href="`/post/articleDetails?id=${post.id}`"
          ><img :src="post.images[1]" alt=""
        /></a>
        <a :href="`/post/articleDetails?id=${post.id}`"
          ><img :src="post.images[2]" alt=""
        /></a>
      </el-row>
      <!-- 底部信息栏 -->
      <el-row type="flex" justify="space-between" class="post-info">
        <el-row class="post-info-left" type="flex" align="middle">
          <!-- 城市 -->
          <span class="city">
            <i class="el-icon-location"></i>{{ post.cityName }}
          </span>
          <!-- 文章作者 -->
          <el-row type="flex" align="middle" class="author">
            by
            <a href="/user/personal">
              <img
                :src="$axios.defaults.baseURL + post.account.defaultAvatar"
                alt=""
              />
              {{ post.account.nickname }}
            </a>
          </el-row>
          <!-- 浏览次数 -->
          <span class="watchCounts">
            <i class="el-icon-view"></i>{{ post.watch }}
          </span>
        </el-row>
        <!-- 点赞次数 -->
        <span class="post-info-right"
          >{{ post.like == null ? "0" : post.like }} 赞</span
        >
      </el-row>
    </div>
    <!-- 图片多于1张小于3张时使用第二种格式 -->
    <div
      class="single2"
      v-if="post.images.length >= 1 && post.images.length < 3"
    >
      <el-row type="flex" justify="space-between" align="middle">
        <!-- 左侧图片显示区域 -->
        <el-col :span="8">
          <el-row
            type="flex"
            justify="space-between"
            align="middle"
            class="img-card"
          >
            <a :href="`/post/articleDetails?id=${post.id}`">
              <img :src="post.images[0]" alt="" />
            </a>
          </el-row>
        </el-col>
        <!-- 右侧攻略文章显示区域 -->
        <el-col :span="16">
          <!-- 文章标题 -->
          <h3 @click="$router.push(`/post/articleDetails?id=${post.id}`)">
            {{ post.title }}
          </h3>
          <!-- 文章内容 -->
          <div
            class="content"
            @click="$router.push(`/post/articleDetails?id=${post.id}`)"
          >
            {{ post.summary }}
          </div>
          <el-row type="flex" justify="space-between" class="post-info">
            <el-row class="post-info-left" type="flex" align="middle">
              <!-- 城市 -->
              <span class="city">
                <i class="el-icon-location"></i>{{ post.cityName }}
              </span>
              <!-- 文章作者 -->
              <el-row type="flex" align="middle" class="author">
                by
                <a href="/user/personal">
                  <img
                    :src="$axios.defaults.baseURL + post.account.defaultAvatar"
                    alt=""
                  />
                  {{ post.account.nickname }}
                </a>
              </el-row>
              <!-- 浏览次数 -->
              <span class="watchCounts">
                <i class="el-icon-view"></i>{{ post.watch }}
              </span>
            </el-row>
            <!-- 点赞次数 -->
            <span class="post-info-right"
              >{{ post.like == null ? "0" : post.like }} 赞</span
            >
          </el-row>
        </el-col>
      </el-row>
    </div>
    <!-- 无图片展示使用第三种格式 -->
    <div class="single3" v-if="post.images.length == 0">
      <!-- 文章标题 -->
      <h3 @click="$router.push(`/post/articleDetails?id=${post.id}`)">
        {{ post.title }}
      </h3>
      <!-- 文章内容 -->
      <div
        class="content"
        @click="$router.push(`/post/articleDetails?id=${post.id}`)"
      >
        {{ post.summary }}
      </div>
      <el-row type="flex" justify="space-between" class="post-info">
        <el-row class="post-info-left" type="flex" align="middle">
          <!-- 城市 -->
          <span class="city">
            <i class="el-icon-location"></i>{{ post.cityName }}
          </span>
          <!-- 文章作者 -->
          <el-row type="flex" align="middle" class="author">
            by
            <a href="/user/personal">
              <img
                :src="$axios.defaults.baseURL + post.account.defaultAvatar"
                alt=""
              />
              {{ post.account.nickname }}
            </a>
          </el-row>
          <!-- 浏览次数 -->
          <span class="watchCounts">
            <i class="el-icon-view"></i>{{ post.watch }}
          </span>
        </el-row>
        <!-- 点赞次数 -->
        <span class="post-info-right"
          >{{ post.like == null ? "0" : post.like }} 赞</span
        >
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    post: {
      type: Object,
      required: true,
    },
  },
};
</script>

<style lang="less" scoped>
.strategyItem {
  width: 100%;
  padding: 20px 0;
  border-bottom: 1px solid #ddd;
  margin-bottom: 5px;
  h3 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 15px;
    font-weight: 400;
    font-size: 18px;
    cursor: pointer;
    &:hover {
      color: orange;
    }
  }
  .content {
    margin-bottom: 15px;
    line-height: 1.5;
    font-size: 14px;
    height: 63px;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
  .img-card {
    margin: 15px 0;
    img {
      width: 220px;
      height: 150px;
    }
  }
  .post-info {
    .post-info-left {
      font-size: 12px;
      color: #999;
      span {
        margin-right: 10px;
        text-align: center;
        i {
          margin-right: 5px;
        }
      }
      .author {
        margin-right: 10px;
        a {
          display: flex;
          align-items: center;
          color: orange;
          img {
            border-radius: 50%;
            width: 16px;
            height: 16px;
            margin: 5px;
          }
        }
      }
    }
    .post-info-right {
      color: orange;
    }
  }
}
</style>